<!--
 * @Descripttion:
 * @version:
 * @Author: cdy
 * @Date: 2025-06-30 10:13:46
 * @LastEditors: cdy
 * @LastEditTime: 2025-08-08 14:37:43
-->
<template>
  <div class="pageOut">
    <div class="pageContain" style="overflow: hidden; width: calc(100% - 2vw)">
      <div class="topFenallContain" style="margin-top: 2vh">
        <div class="top">分组同比分析</div>
        <div class="topFen divBeteewn">
          <!-- <div class="useElect divFlexEnd">
            <div class="useAll" style="background: #78b029">分组1</div>
            <el-select
              v-model="selectLong"
              style="width: 5.2vw; margin-left: 0.5vw"
            >
              <el-option lable="产线1" value="产线1"></el-option>
              <el-option lable="产线1" value="产线1"></el-option>
              <el-option lable="产线1" value="产线1"></el-option>
              <el-option lable="产线1" value="产线1"></el-option>
            </el-select>
            <div class="useAll" style="margin-left: 2.6vw; background: #00c0e0">
              分组2
            </div>
            <el-select
              v-model="selectLong"
              style="width: 5.2vw; margin-left: 0.5vw"
            >
              <el-option lable="产线2" value="产线2"></el-option>
              <el-option lable="产线2" value="产线2"></el-option>
              <el-option lable="产线2" value="产线2"></el-option>
              <el-option lable="产线2" value="产线2"></el-option>
            </el-select>
            <div class="useAll" style="margin-left: 2.6vw; background: #f07b1c">
              分组3
            </div>
            <el-select
              v-model="selectLong"
              style="width: 5.2vw; margin-left: 0.5vw; margin-right: 2vw"
            >
              <el-option lable="产线3" value="产线3"></el-option>
              <el-option lable="产线3" value="产线3"></el-option>
              <el-option lable="产线3" value="产线3"></el-option>
              <el-option lable="产线3" value="产线3"></el-option>
            </el-select>
          </div> -->
        </div>
        <div class="chart1Contain"><div class="chart1"></div></div>
      </div>
      <div class="topFenallContain" style="margin-top: 2.5vh">
        <div class="top1">能耗分析</div>
        <div class="topFen divBeteewn">
          <div class="useElect divFlexEnd" style="padding-bottom: 20px">
            <div class="useAll" style="background: #0059b2">能源类型</div>
            <el-select
              v-model="enengerType"
              style="width: 5.2vw; margin-left: 0.5vw"
              @change="getTypeDevice"
            >
              <el-option lable="电" value="电"></el-option>
              <el-option lable="燃气" value="燃气"></el-option>
              <el-option lable="光伏" value="光伏"></el-option>
            </el-select>
            <el-select
              v-model="compare"
              style="width: 5.2vw; margin-left: 0.5vw"
              @change="getEnengyAnly()"
            >
              <el-option lable="趋势" value="趋势"></el-option>
              <el-option lable="同比" value="同比"></el-option>
              <el-option lable="环比" value="环比"></el-option>
            </el-select>
            <div class="useAll" style="margin-left: 2.6vw; background: #0059b2">
              分组
            </div>
            <el-select
              v-model="device"
              style="width: 7vw; margin-left: 0.5vw"
              @change="changeGroup()"
            >
              <el-option
                v-for="item in groupList"
                :lable="item.id"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-select
              v-model="selectLong"
              style="width: 5.2vw; margin-left: 0.5vw"
              @change="getEnengyAnly()"
            >
              <el-option lable="日" value="日"></el-option>
              <el-option lable="月" value="月"></el-option>
              <el-option lable="年" value="年"></el-option>
            </el-select>
            <div
              class="useAll"
              style="margin-left: 2.6vw; background: #0059b2"
              v-if="compare == '趋势' || compare == '环比'"
            >
              时间
            </div>
            <el-config-provider :locale="locale" v-if="compare == '趋势'">
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月-日"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-if="selectLong == '日'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月"
                type="month"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-if="selectLong == '月'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年"
                type="year"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY"
                value-format="YYYY"
                v-if="selectLong == '年'"
                @change="getEnengyAnly()"
              />
            </el-config-provider>
            <el-config-provider :locale="locale" v-if="compare == '环比'">
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月-日"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-if="selectLong == '日'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月"
                type="month"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-if="selectLong == '月'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年"
                type="year"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY"
                value-format="YYYY"
                v-if="selectLong == '年'"
                @change="getEnengyAnly()"
              />
            </el-config-provider>

            <div
              class="useAll"
              style="margin-left: 2.6vw; background: #0059b2"
              v-if="compare == '同比'"
            >
              时间1
            </div>
            <el-config-provider :locale="locale" v-if="compare == '同比'">
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月-日"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-if="selectLong == '日'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年-月"
                type="month"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-if="selectLong == '月'"
                @change="getEnengyAnly()"
              />
              <el-date-picker
                v-model="timedetail"
                placeholder="年"
                type="year"
                style="width: 7.4vw; margin-left: 0.5vw; margin-right: 2vw"
                format="YYYY"
                value-format="YYYY"
                v-if="selectLong == '年'"
                @change="getEnengyAnly()"
              />
            </el-config-provider>

            <div class="useAll" style="background: #0059b2">班次</div>
            <el-select
              v-model="workTime"
              clearable
              style="width: 5.2vw; margin-left: 0.5vw; margin-right: 2vw"
              placeholder="班次"
              @change="getEnengyAnly()"
            >
              <el-option lable="白班" value="白班"></el-option>
              <el-option lable="夜班" value="夜班"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart1Contain"><div class="chart2"></div></div>
      </div>
    </div>
  </div>
</template>

<script>
let nowTime;
import sendMessage from "@/mitt/sendMessage.js";
import * as echarts from "echarts";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import service from "@/api/api";
import { getAllDevice } from "@/mitt/pay.js";
import {
  getHour,
  generateNightTimeArray,
  generateHourDaylyTimeRange,
  currentTimeWOrk,
  currentNightWork,
  currentAllDay,
  allDay,
  option1compare,
  ArrEachOne,
  option1Qu,
} from "@/mitt/userNenegy.js";
import {
  userEnengy,
  completeMissingTimes,
  arrEachOne,
  getToday,
  arrEach,
  getMonthDates,
  getYearMonths,
  formatNumber,
} from "@/mitt/until.js";
let chart1 = null;
let chart2 = null;
export default {
  beforeRouteEnter(to, from, next) {
    sendMessage(3, "用能分析");
    next();
  },

  data() {
    return {
      compareList: [],
      workTime: "",
      selectLong: "",
      date1: "",
      locale: zhCn,
      enengerType: "电",
      compare: "趋势",
      device: null,
      deviceType: 1,
      selectLong: "日",
      timedetail: "",
      timedetail1: "",
      dayWorkStart: "",
      dayWorkEnd: "",
      nightWorkStart: "",
      nightWorkEnd: "",
      deviceList: [],
      groupId: null,
      groupList: [],
      queryType: 1,
      option: {
        color: [
          "#2692DD",
          "#4ea7e6",
          "#77b9e8",
          "#d48265",
          "#91c7ae",
          "#051698",
          "#50CAFD",
          "#0059B2",
          "#3D9899",
          "#00F3FF",
          "#00E8F7",
          "#9CCDC4",
        ],
        grid: {
          left: "3%",
          right: "3%",
          top: "12%",
          bottom: "9%",
        },
        tooltip: {
          trigger: "axis",
          // formatter: function (params) {
          //   return params.data.name + "<br/>" + params.data.value;
          // },
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: "right",
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["DS", "DC", "MA"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "小时",
          nameTextStyle: {
            color: "black",
            fontWeight: 600,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, // 不显示分割线
          },
          axisLabel: {
            color: "black",
            fontWeight: 600,
          },
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
        },
        yAxis: {
          name: "单位:Kw.h",
          nameTextStyle: {
            color: "black",
            fontWeight: 600,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontWeight: 600,
            fontSize: 10,
          },
          splitLine: {
            show: false, // 不显示分割线
          },
        },

        series: [
          {
            name: "DS",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80,
            ],
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",

            barWidth: "50%",
          },
          {
            name: "DC",
            data: [
              80, 70, 10, 50, 90, 40, 70, 80, 70, 10, 50, 90, 10, 50, 90, 40,
              70, 80, 70, 10, 50, 90, 40, 70,
            ],
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",

            barWidth: "50%",
          },
          {
            name: "MA",
            data: [
              60, 40, 10, 20, 50, 10, 30, 40, 10, 20, 50, 10, 30, 40, 10, 20,
              50, 10, 30, 40, 10, 20, 50, 10,
            ],
            type: "bar",
            stack: "total",
            barWidth: "50%",

            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      option1: {
        grid: {
          left: "3%",
          right: "3%",
          top: "12%",
          bottom: "9%",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["日"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "小时",
          nameTextStyle: {
            color: "black",
            fontWeight: 600,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "black",
            fontWeight: 600,
          },
          splitLine: {
            show: false, // 不显示分割线
          },
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
        },
        yAxis: {
          name: "单位:Kw.h",
          nameTextStyle: {
            color: "black",
            fontWeight: 600,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontWeight: 600,
            fontSize: 10,
          },
          splitLine: {
            show: false, // 不显示分割线
          },
        },

        series: [
          {
            name: "日",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80,
            ],
            type: "bar",
            itemStyle: {
              color: "#2491DE",
            },
            barWidth: "50%",
            barMaxWidth: 40,
          },
        ],
      },
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    // 获取白班和夜班时间

    async getTimeStart() {
      let res = await service({
        method: "get",
        url: "/emission-shift/find-all",
        params: {
          configType: "shift",
        },
      });

      res.data.forEach((item) => {
        if (item.energyType == "DAY_SHIFT") {
          this.dayWorkStart = getHour(item.startTime);
          this.dayWorkEnd = getHour(item.endTime);
        } else if (item.energyType == "NIGHT_SHIFT") {
          this.nightWorkStart = getHour(item.startTime);
          this.nightWorkEnd = getHour(item.endTime);
        }
      });
      this.getTypeDevice();
    },
    async getTypeDevice() {
      if (this.enengerType == "电") {
        this.deviceType = 1;
      } else if (this.enengerType == "燃气") {
        this.deviceType = 2;
      } else if (this.enengerType == "光伏") {
        this.deviceType = 4;
      }
      let res = await service({
        method: "get",
        url: "/energy-analysis/group-info",
        params: {
          deviceType: this.deviceType,
        },
      });

      this.groupList = res.data;
      this.device = this.groupList[0].name;
      this.groupId = this.groupList[0].id;
      this.getEnengyAnly();
    },
    changeGroup() {
      this.groupList.forEach((item) => {
        if (item.name == this.device) {
          this.groupId = item.id;
        }
      });
      this.getEnengyAnly();
    },
    initChart() {
      chart2 = echarts.init(document.getElementsByClassName("chart2")[0]);
      chart2.setOption(this.option1);
    },
    handleResize() {
      if (chart1) {
        chart1.resize();
      }
      if (chart2) {
        chart2.resize();
      }
    },
    // async getAllGroup() {
    //   let res = await service({
    //     method: "get",
    //     url: "/group/find-all",
    //   });

    //   if (res.status == "SUCCESS") {
    //     this.deviceList = res.data;
    //     this.device = this.deviceList[0].name;
    //   }
    // },
    // 第一个柱状堆叠图
    async getGroupCompare() {
      let res = await service({
        method: "get",
        url: "/energy-analysis/group-analysis",
      });

      this.compareList = res.data;
      this.compareList.forEach((item) => {
        item.itemList = completeMissingTimes(nowTime, item.itemList);
      });
      let time = [];
      arrEachOne(this.compareList[0].itemList, time);
      let legendDate = [];
      let seriesDate = [];
      this.compareList.forEach((item) => {
        legendDate.push(item.name);
        let data = [];
        item.itemList.forEach((it) => {
          formatNumber(it[1]);

          data.push(formatNumber(it[1]));
        });
        seriesDate.push({
          name: item.name,
          data: data,
          label: {
            show: false,
            color: "white",
            formatter: function (e) {
              if (e.data == 0) {
                return "";
              } else {
                return e.data;
              }
            },
          },
          emphasis: {
            // 高亮状态
            label: {
              show: false, // 高亮时不显示 label
            },
          },
          type: "bar",
          stack: "total",
          barWidth: "50%",
          barMaxWidth: 40,
        });
      });
      this.option.legend.data = legendDate;
      this.option.xAxis.data = time;
      this.option.series = seriesDate;
      chart1 = echarts.init(document.getElementsByClassName("chart1")[0]);
      chart1.setOption(this.option);
    },
    changeQuShi() {
      this.timedetail = "";
    },
    async getEnengyAnly() {
      let time = [];
      let workTime = "";
      if (this.workTime == "白班") {
        workTime = "DAY_SHIFT";
      } else if (this.workTime == "夜班") {
        workTime = "NIGHT_SHIFT";
      } else {
        workTime = "";
      }
      let timeType = "";
      let queryType = "";
      if (this.selectLong == "日") {
        timeType = 1;
      } else if (this.selectLong == "月") {
        timeType = 3;
      } else if (this.selectLong == "年") {
        timeType = 4;
      }
      if (this.compare == "趋势") {
        queryType = 1;
      } else if (this.compare == "同比") {
        queryType = 2;
      } else if (this.compare == "环比") {
        queryType = 3;
      }

      let data = {
        dataTime: this.timedetail,
        deviceType: this.deviceType,
        groupId: this.groupId,
        queryType: queryType,
        timeType: timeType,
        classes: workTime,
      };

      let res = await service({
        method: "get",
        url: "/energy-analysis/energy-analysis",
        params: data,
      });

      let todayTime = getToday();
      if (timeType == 1) {
        if (todayTime == this.timedetail) {
          if (workTime == "DAY_SHIFT") {
            time = currentTimeWOrk(this.dayWorkStart);
          } else if (workTime == "NIGHT_SHIFT") {
            time = currentNightWork(this.nightWorkStart, this.nightWorkEnd);
          } else {
            time = currentAllDay();
          }
        } else {
          if (workTime == "DAY_SHIFT") {
            time = generateHourDaylyTimeRange(
              this.dayWorkStart,
              this.dayWorkEnd
            );
          } else if (workTime == "NIGHT_SHIFT") {
            time = generateNightTimeArray(
              this.nightWorkStart,
              this.nightWorkEnd
            );
          } else {
            time = allDay();
          }
        }
      } else if (timeType == 3) {
        time = getMonthDates(this.timedetail);
      } else if (timeType == 4) {
        time = getYearMonths(this.timedetail);
        console.log(time);
      }

      let time1 = [],
        result = [],
        result1 = [],
        number = [],
        number1 = [];

      if (this.compare == "趋势") {
        this.option1 = option1Qu;
        result = res.data;
        if (timeType == 1) {
          console.log(result);
          result = completeMissingTimes(time, result);

          arrEach(result, time1, number);

          this.option1.xAxis.name = "小时";
          this.option1.legend.data = ["小时"];
          this.option1.series[0].name = "小时";
        } else if (timeType == 3) {
          result = completeMissingTimes(time, result);
          arrEach(result, time1, number);
          this.option1.xAxis.name = "日";
          this.option1.legend.data = ["日"];
          this.option1.series[0].name = "日";
        } else if (timeType == 4) {
          result.forEach((item) => {
            item[0] = item[0] + "月";
          });
          result = completeMissingTimes(time, result);
          arrEach(result, time1, number);
          this.option1.xAxis.name = "月";
          this.option1.legend.data = ["月"];
          this.option1.series[0].name = "月";
        }
        this.option1.xAxis.data = time1;
        this.option1.series[0].data = number;
      } else if (this.compare == "同比") {
        result = res.data.metadata;
        result1 = res.data.compareData;
        if (timeType == 1) {
          this.option1.xAxis.name = "小时";
        } else if (timeType == 3) {
          result = completeMissingTimes(time, result);
          this.option1.xAxis.name = "天";
        } else if (timeType == 4) {
          result.forEach((item) => {
            item[0] = item[0] + "月";
          });
          result1.forEach((item) => {
            item[0] = item[0] + "月";
          });
          result = completeMissingTimes(time, result);
          this.option1.xAxis.name = "月";
        }
        this.option1 = option1compare;

        result = completeMissingTimes(time, result);
        result1 = completeMissingTimes(time, result1);

        arrEach(result, time1, number);
        ArrEachOne(result1, number1);
        this.option1.xAxis.data = time1;
        this.option1.series[0].data = number;
        this.option1.series[1].data = number1;
        this.option1.legend.data = ["今年", "去年"];
        this.option1.series[0].name = "今年";
        this.option1.series[1].name = "去年";
      } else if (this.compare == "环比") {
        this.option1 = option1compare;
        result = res.data.metadata;
        result1 = res.data.compareData;
        if (timeType == 1) {
          this.option1.xAxis.name = "小时";
          this.option1.legend.data = ["今天", "昨天"];
          this.option1.series[0].name = "今天";
          this.option1.series[1].name = "昨天";
        } else if (timeType == 3) {
          this.option1.xAxis.name = "天";
          this.option1.legend.data = ["本月", "上月"];
          this.option1.series[0].name = "本月";
          this.option1.series[1].name = "上月";
        } else if (timeType == 4) {
          result.forEach((item) => {
            item[0] = item[0] + "月";
          });
          result1.forEach((item) => {
            item[0] = item[0] + "月";
          });

          this.option1.xAxis.name = "月";
          this.option1.legend.data = ["今年", "去年"];
          this.option1.series[0].name = "今年";
          this.option1.series[1].name = "去年";
        }

        result = completeMissingTimes(time, result);
        result1 = completeMissingTimes(time, result1);

        arrEach(result, time1, number);
        ArrEachOne(result1, number1);
        this.option1.xAxis.data = time1;
        this.option1.series[0].data = number;
        this.option1.series[1].data = number1;
      }
      if (this.deviceType == "2") {
        this.option1.yAxis.name = "单位:m³";
      }
      chart2.setOption(this.option1, {
        notMerge: true, // 关键：禁用合并模式，完全替换
        lazyUpdate: true, // 可选：延迟更新以提高性能
      });
    },
  },

  created() {
    getHour("08:00:00");
    // let time = generateTimeArray("20:20", "08:05");

    nowTime = userEnengy();
    this.getTimeStart();

    this.timedetail = getToday();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.getGroupCompare();
      window.addEventListener("resize", this.handleResize);
    });
  },
  beforeUnmount() {
    // Vue 3（Vue 2 用 beforeDestroy）
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped>
.el-select {
  color: #5f5f5f !important;
}
:deep(.el-select__icon) {
  color: #5190cd !important;
}
:deep(.el-select__wrapper) {
  background: #efefef !important;
}
:deep(.el-select .el-select__wrapper) {
  height: 3vh !important;
  font-size: 0.8vw;
}
// 文字颜色
:deep(.el-select__selected-item) {
  display: flex;
  align-items: center;
  height: 3vh !important;
  line-height: 3vh !important;
  color: #5f5f5f;
}

// 设置下拉框的样式
.el-select-dropdown__item {
  height: 5vh !important; /* 修改高度 */
  line-height: 5vh !important; /* 修改行高，保持与高度一致 */
  font-size: 0.8vw !important; /* 修改字体大小 */
}
.chart1Contain {
  width: 100%;
  height: 32.4vh;
}

.el-table .el-table__body tr {
  background-color: transparent !important; /* 设置为透明背景 */
}
:deep(.el-input) {
  background: #efefef;
  height: 3vh !important;
}
:deep(.el-input__inner) {
  font-size: 0.8vw;
  line-height: 3vh !important;
}
.chart1,
.chart2 {
  width: 100%;
  height: 32.4vh;
  // background: red;
}
.useElect {
  width: 100%;
  height: 3.15vh;
}

.fenzuCompare {
  width: 200px;
  line-height: 50px;
  border: 1px solid black;
  border-bottom: none;
  text-align: center;
  color: #77b9e8;
}
</style>
